@extends('layouts.app')

@section('content')
    <div id="info">
        <div class="col-md-20">
            <div class="panel panel-default">
                <div class="panel-heading">用户信息</div>

                <div class="panel-body">
                    <div class="form-inline">
                        <div class="form-group">
                            <label>学号/姓名/专业：</label>
                            <input type="text" class="form-control" v-model="key">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" v-on:click="key = ''">清空</button>
                        </div>
                    </div>
                </div>
                <div class="panel-heading">用户列表</div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>id</th>
                            <td>学号</td>
                            <td>姓名</td>
                            <td>性别</td>
                            <td>年级</td>
                            <td>专业</td>
                            <td>班级</td>
                            <td>关注时间</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="user in users" v-if="isShowUser(user)">
                            <th>@{{ user.id }}</th>
                            <td>@{{ user.number }}</td>
                            <td>@{{ user.name }}</td>
                            <td>@{{ user.gender ? '男': '女' }}</td>
                            <td>@{{ user.grade }}</td>
                            <td>@{{ user.major }}</td>
                            <td>@{{ user.class.name }}</td>
                            <td>@{{ user.subscribed_at }}</td>
                            <td><button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#informationModal" v-on:click="getInfo(user)">修改信息</button></td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
        <div class="modal fade" id="informationModal" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document" style="width: 1000px">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">修改 @{{ user.name }} 信息</h4>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-danger" v-show="msg">@{{ msg }}</div>
                        <div class="form-inline">
                            <div class="form-group">
                                <label>姓名：</label>
                                <input type="text" class="form-control" v-model.trim="name">
                            </div>
                            <div class="form-group">
                                <label>长号：</label>
                                <input type="text" class="form-control" v-model.trim="cellphone">
                            </div>
                            <div class="form-group">
                                <label>短号：</label>
                                <input type="text" class="form-control" v-model.trim="shortphone">
                            </div>
                            <div class="form-group">
                                <label>地址：</label>
                                <input type="text" class="form-control" v-model.trim="address">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="modal_close" data-dismiss="modal" v-on:click="msg=''">关闭</button>
                        <button type="button" class="btn btn-primary" id="modal_ok" v-on:click="updateInfo()" data-loading-text="保存中..." autocomplete="off">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
@endsection

@section('js')
    <script>
        var info = new Vue({
            el: '#info',
            data:{
                users: ' {!! $users !!}',
                key: '',

                msg: '',
                title: '',

                name: '',
                cellphone:'',
                shortphone:'',
                address:'',

                user: {},
            },
            created: function () {
                this.users = JSON.parse(this.users);
            },
            methods:{
                getInfo: function(user){
                    this.user = user;
                    this.name = user.name ? user.name : '';
                    this.cellphone = user.cellphone ? user.cellphone : '';
                    this.shortphone = user.short_phone ? user.short_phone : '';
                    this.address = user.dormitory_address;
                },
                isShowUser: function (user) {
                    if(this.key == ''){
                        return false;
                    }else{
                        var len = this.key.length
                        if(len>= 4 && user.number.indexOf(this.key) != -1){
                            return true;
                        }
                        if(user.name && user.name.indexOf(this.key)!= -1){
                            return true;
                        }
                        if(user.major && user.major.indexOf(this.key)!= -1){
                            return true;
                        }
                        if(len>=4 && user.birthday.indexOf(this.key)!= -1){
                            return true;
                        }
                        if(len>=4 && user.class.name.indexOf(this.key) != -1){
                            return true;
                        }
                        return false;
                    }
                },
                updateInfo: function () {
                    var $btn = $("#modal_ok").button('loading');
                    this.$http.post('{{ url('admin/user') }}/'+this.user.id,{
                        cellphone: this.cellphone,
                        shortphone: this.shortphone,
                        address: this.address,
                        name: this.name,
                    }).then(function (response) {
                        Vue.set(this.user, 'name', response.data.name);
                        Vue.set(this.user, 'cellphone', response.data.cellphone);
                        Vue.set(this.user, 'short_phone', response.data.short_phone);
                        Vue.set(this.user, 'dormitory_address', response.data.dormitory_address);

                        this.msg = '';

                        $btn.button('reset');
                        document.getElementById('modal_close').click();
                    }, function (response) {
                        $btn.button('reset');
                        if(response.data.shortphone){
                            this.msg = '' + response.data.shortphone;
                        }
                        if(response.data.cellphone){
                            this.msg = '' + response.data.cellphone;
                        }
                    })
                }
            }
        })
    </script>
@endsection